<template>
  <view class="x-flexp-jc">
    <view 
      class="x-border-bg x-ba x-ra-circle x-overflow-hidden x-line-height-0 x-flexp-jcai"
      :style="{width: sizeCalc, height: sizeCalc}"
    >
      <!-- #ifdef H5 -->
      <img
        class="x-ba x-bg-bg x-ra-circle"
        :style="{width: sizeCalc, height: sizeCalc, objectFit: 'contain'}"
        :src="src"
      >
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <image
        :style="{width: sizeCalc, height: sizeCalc}"
        class="x-ba x-bg-bg x-ra-circle"
        mode="aspectFill"
        :src="src"
      />
      <!-- #endif -->
    </view>		
  </view>
</template>

<!-- h5   :crossorigin="crossorigin?'anonymous':'null'" -->

<script>
  export default {
    name: 'XAvatar',
    options: {
      virtualHost: true
    },
    props: {
      src: {
        type: [String, null],
        default: '',
      },
      size: {
        type: [Number,String],
        default: uni.$x.theme.uniFontSizeLg,
      },
      crossorigin: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      sizeCalc() {
        return typeof this.size==='number'?`${this.size}rpx`:this.size
      }
    },
    methods: {				
      
    }
  }
</script>

<style>
</style>